<template>
<div 
    class="my-chart-el"
    ref="MyChart">
    <div
        ref="Canvas">
    </div>
</div>
</template>
<script>
/*
 echart封装组件,自适应高度宽度,动态或配置项
 */
export default {
    name:'MyChart',
    data() {
        this.chart;  //echart实例
        return {};
    },
    mounted(){
        window.addEventListener("resize",()=>{
            if(!this.chart) return;
            this.chart.resize();
        });
    },
    methods:{
        /*
         写入配置项(外部调用)
         */
        setOption(option){
            if(typeof option == 'function'){
                option = option();
            }
            const Canvas = this.$refs.Canvas;
            if(this.chart){
                this.chart.dispose();  //销毁
            }
            this.chart = this.$echarts.init(Canvas, null, { renderer: 'svg' });
            this.chart.setOption(option);
            return this.chart;
        },
    },
};
</script>
<style scoped lang="scss">
.my-chart-el{
    width: 100%;
    height: 100%;
    position: relative !important;
    >div{
        position: absolute !important;
        left: 0;
        right: 0;
        width:100%;
        height: 100%;
    }
}
</style>
